<template>
	<view class="content">
		<image class="logo" @click="change" src="/static/logo.png"></image>
		<view class="text-area">
		    <view v-if="!raining">今天天气真好</view>
		    <view v-if="raning">下雨天，只能在家呆着了</view>
		    <view v-if="state==='Vue'">state的值是Vue</view>
		    <view>State is{{state?'Vue':'App'}}</view>
		    <view v-if="state==='Vue'">uni-app</view>
			<view v-else-if="state==='html'">HTML</view>
			<view v-else>APP</view>
			<view v-for="item in arr" style="color: blue;">
				{{item}}
			</view>
			<view v-for="(value, name, index) in object">
				{{index}}.{{name}}:{{value}}
			</view>
			<view v-for="item in arr" :key="item.id">
				<view style="color: #0000ff;">{{item.id}}:{{item.name}}</view>
			</view>
		</view>
		<view class="container">
		    <view class="box" :style="blockStyle" @click="changes"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				raining:false,
				state:'Vue',
				arr:[
					{id:1,name:'uni-app'},
					{id:2,name:'HTML'},
					
				],
				object:{
					title:'new student',
					name:'小红',
					birthday:'2004.12.02'
				},
				}
		},
		methods: {
	
		}
	}
</script>

<style>
.logo{
	width: 200rpx;
	height: 200rpx;
	margin-left: 265rpx;
	margin-bottom: 50rpx;
}

.text-area{
	text-align: center;
}
.container{
	background-color: aquamarine;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 160rpx;
	width: 160rpx;
	
}
.box{
	width: 200rpx;
	height: 200rpx;
	transition: all 0.3s ease;
}
</style>
